import React from 'react';
import PropTypes from 'prop-types';
import MonacoEditor from 'react-monaco-editor';
// import CONSTANTS from 'utils/constants';
import ListLoading from 'atComponents/ListLoading';
import extensions from './extensions';
import utils from 'utils';
import './index.scss';

export const requireConfig = {
  url: '//g.alicdn.com/code/lib/require.js/2.3.6/require.js',
  paths: {
    vs: '//g.alicdn.com/code/lib/monaco-editor/0.33.0/min/vs',
  },
};

export default class Editor extends React.Component {
  static propTypes = {
    editorStyle: PropTypes.object,
    size: PropTypes.string,
    theme: PropTypes.string,
  };

  static defaultProps = {
    editorStyle: { height: 'calc(100vh - 76px - 162px)' },
    size: 'medium',
    theme: 'vs',
  };

  constructor(props) {
    super(props);
    this.state = {
      language: this.getLanguageFromFileName(props.fileName),
      loading: true,
    };
  }

  componentDidUpdate(prevProps) {
    // fileName发生变化且 window.monaco 存在（不加这个判断在未加载完时会报错），则改变language
    if (prevProps.fileName !== this.props.fileName && window.monaco) {
      this.setState({
        language: this.getLanguageFromFileName(this.props.fileName),
      });
    }
  }

  getLanguageFromFileName(fileName) {
    let language;
    if (fileName) {
      const suffix = fileName.split('.')[fileName.split('.').length - 1];
      if (extensions[suffix]) {
        language = extensions[suffix];
      } else {
        language = suffix;
      }
    } else {
      language = 'plaintext';
    }
    return language;
  }

  // 编辑器聚焦在第一行末尾
  handleFocus = (editor) => {
    if (this.props.autoFocus) {
      editor.focus();
    }
  };

  render() {
    const { language, loading } = this.state;
    const { editorStyle, size, theme, genWatermarkimage, ...others } = this.props;
    // console.log(editorStyle, 'editorStyle')
    // 小尺寸 loading和editor-container大小一致；正常按原有高度80
    return (
      <div
        className={
          utils.isGenWatermarkimage(genWatermarkimage)
            ? 'editor-container-image editor-container'
            : 'editor-container'
        }
        style={editorStyle}
      >
        {size === 'small' && loading && (
          <div className="editor-loading">
            <ListLoading />
          </div>
        )}
        {size === 'medium' && loading ? <ListLoading style={{ paddingTop: 80 }} /> : null}
        <MonacoEditor
          requireConfig={requireConfig}
          theme={theme}
          language={language}
          options={{
            selectOnLineNumbers: true,
            automaticLayout: true,
            scrollBeyondLastLine: false,
            minimap: {
              enabled: false,
            },
          }}
          // height={loading ? 415 : 585} // loading 的时候要把 ListLoading 的高度预留出来
          height={loading ? 'calc(100% - 80px)' : '100%'}
          editorWillMount={() => {
            this.setState({
              loading: false,
            });
          }}
          editorDidMount={this.handleFocus}
          {...others}
        />
      </div>
    );
  }
}
